<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white solids-bottom">
			<block slot="content">
				{{detail.Estate.Cantavil}}
			</block>
			<block slot="right">
				<text class="cuIcon-like" style="font-size: 40upx;line-height: 60upx;" ></text>
			</block>
		</cu-custom>
		<view>
			<view class="uni-column-item" v-if="detail.PicCount>0">
				<swiper :autoplay="autoplay" :indicator-dots="indicatorDots" :current="index" circular="false" style="height: 480upx;" @change="swiperChange" @animationfinish="animationfinish">
					<swiper-item v-for="(img,key) in detail.Pics" :key="key">
						<image :src="img.PicSrc" style="height: 480upx;width: 100%;" />
					</swiper-item>
				</swiper>
				<navigator url="../../media/media" class="uni-column-number">
					<text class="iconfont">&#xe7e0;</text>
					<text class="text">{{detail.PicCount}}</text>
					<!-- <text class="margin-left-sm margin-right-sm">|</text><text class="iconfont">&#xe673;</text>20 -->
				</navigator>
			</view>
			<view v-else class="warp30"></view>
			<view class="article-meta boxs">
				<view class="house-detail clearfix">
					<view class="w100">
						<label class="lable">
							<span style="letter-spacing: 56upx;">均</span>价
						</label>
						<text class="text text-red2 text-lg" style="margin-top: -4upx;">{{detail.Estate.AvgPrice}}元/平米</text>
					</view>
					<view class="w100">
						<label class="lable">小区地址</label>
						<text class="text">{{detail.Estate.Address}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="article-meta mb10 boxs" style="padding-top: 10upx;">
			<view class="house-detail-box clearfix mb10">
				<view class="house-detail-box-div">
					<text class="house-detail-box-div-name">在售房源</text>
					<text class="house-detail-box-div-num">{{detail.SaleHouseCount}}套</text>
				</view>
				<view class="house-detail-box-div">
					<text class="house-detail-box-div-name">在租房源</text>
					<text class="house-detail-box-div-num">{{detail.RentHouseCount}}套</text>
				</view>
			</view>
			<text class="article-author f16 mb10">小区信息</text>
			<view class="house-detail clearfix">
				<view class="w50">
					<label class="lable">建筑类型</label>
					<text class="text">{{detail.Estate.Category}}</text>
				</view>
				<view class="w50 right">
					<label class="lable">建筑年代</label>
					<text class="text">{{detail.Estate.SellTime}}</text>
				</view>
				<view class="w50">
					<label class="lable"><span style="letter-spacing: 14upx;">绿化</span>率</label>
					<text class="text">{{detail.Estate.ForestRate}}</text>
				</view>
				<view class="w50 right">
					<label class="lable"><span style="letter-spacing: 14upx;">总户</span>数</label>
					<text class="text">{{detail.Estate.NumberOfNeighborhood}}</text>
				</view>
			</view>
		</view>
		<view class="article-content">
			<view style="position: relative;">
				<map style="height: 350upx;width: 100%;" :latitude="detail.Estate.Latitude" :longitude="detail.Estate.Longitude" :markers="covers" scale="18">
					<view class="adrbox">{{detail.Estate.Cantavil}}{{detail.Estate.Address}}</view>
				</map>
			</view>
			<view class="cu-list grid col-2 no-border">
				<view class="cu-item map" v-for="(item,index) in keywords" :key="index">
					<view class="flex">
						<text class="iconfont text-black text-xxl" v-if="item.type=='公交站'">&#xe672;</text>
						<text class="iconfont text-black text-xxl" v-if="item.type=='小学'">&#xe66f;</text>
						<text class="iconfont text-black text-xxl" v-if="item.type=='超市'">&#xe66c;</text>
						<text class="iconfont text-black text-xxl" v-if="item.type=='餐厅'">&#xe670;</text>
						<view style="flex: 1;">
							<text class="text-df text-black text-left" v-if="item.list.length>0">{{item.list[0].title}} ({{item.list.length}})</text>
							<text class="text-sm text-grey text-left">距离{{item.distance}}m，步行约{{item.time}}分钟</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="YZBox">
			<navigator :url="'../careful/careful?detailDate='+encodeURIComponent(JSON.stringify(detail.Estate))" class="YZBtn cu-avatar-box ZXBtn">
				咨询专家了解更多
			</navigator>
		</view>
		
		<view class="model">
			<view class="model-header">
				<text class="model-header-title">出售推荐</text>
			</view>
			<view class="model-main">
				<view class="text-center padding-xs text-grey text-xxl" v-if="detail.SaleHouseList.length==0">
					暂无数据
				</view>
				<navigator url="/pages/house/sell/detail/detail" class="uni-flex uni-row model-item" v-else v-for="(item,index) in detail.SaleHouseList" :key="index">
					<image class="model-item-img" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" />
					<view class="model-item-text" style="flex: 1;">
						<view class="model-item-title">
							<img src="/static/label/lable_esf.png" class="label-box kind1" v-if="item.TypeTag==101"/>
							<img src="/static/label/lable_s.png" class="label-box kind2" v-if="item.TypeTag2==302"/>
							{{item.Title}}
						</view>
						<view class="model-item-main">
							<text class="model-item-title2">{{item.Line1Display}}</text>
							<text class="model-item-title2 adr">{{item.Line2Display}}</text>
							<view class="model-item-title2 main">
								<text class="model-item-main-price">{{item.HighLightDisplay}}<text>{{item.HighLight2Display}}</text></text>
								<text>{{item.Line3Display}}</text>
							</view>
							<text class="model-item-title2">{{item.Line4Display}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="YZBox" v-if="detail.SaleHouseList.length>0">
			<navigator url="#" class="YZBtn cu-avatar-box ZXBtn">
				查看出售房源（{{detail.SaleHouseCount}}套）
			</navigator>
		</view>
		<view class="model">
			<view class="model-header">
				<text class="model-header-title">出租推荐</text>
			</view>
			<view class="model-main">
				<view class="text-center padding-xs text-grey text-xxl" v-if="detail.RentHouseList.length==0">
					暂无数据
				</view>
				<navigator url="/pages/house/sell/detail/detail" class="uni-flex uni-row model-item" v-else v-for="(item,index) in detail.RentHouseList" :key="index">
					<image class="model-item-img" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" />
					<view class="model-item-text" style="flex: 1;">
						<view class="model-item-title">
							<img src="/static/label/lable_z.png" class="label-box kind2" v-if="item.TypeTag2==302"/>
							{{item.Title}}
						</view>
						<view class="model-item-main">
							<text class="model-item-title2">{{item.Line1Display}}</text>
							<text class="model-item-title2 adr">{{item.Line2Display}}</text>
							<view class="model-item-title2 main">
								<text class="model-item-main-price">{{item.HighLightDisplay}}<text>{{item.HighLight2Display}}</text></text>
								<text>{{item.Line3Display}}</text>
							</view>
							<text class="model-item-title2">{{item.Line4Display}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="YZBox">
			<navigator url="#" class="YZBtn cu-avatar-box ZXBtn" v-if="detail.RentHouseList.length>0">
				查看出租房源（{{detail.RentHouseCount}}套）
			</navigator>
		</view>
		<view class="warp120"></view>
		<view class="calltool cu-bar shadow foot tabbar">
			<navigator url="../../brokers/brokers" class="toolbtn" style="background: #FFFFFF;color: #ff5c5c;">
				<view class="iconfont" style="color: #ff5c5c;">&#xe917;</view>
				<view>联系经纪人</view>
			</navigator>
			<view class="toolbtn" style="background: #ff7700;">
				<view class="iconfont">&#xe677;</view>
				<view>我要卖房</view>
			</view>
			<view class="toolbtn" style="background: #fc3e3e;">
				<view class="iconfont">&#xe674;</view>
				<view>我要出租</view>
			</view>
		</view>
	</view>
</template>

<script>
	var graceRichText = require("../../../../static/richText.js");
	export default {
		data() {
			return {
				banner:{},
				detail:{},
				showPopupBottomShare:false,
				current:1,
				title: '怡景豪园',
				imgUrls: [{
						id:1,
						img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
					},{
						id:2,
						img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg'
					},{
						id:3,
						img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg'
					}
				],
				covers: [],
				index: 0, //当前显示索引
				indicatorDots: false, //显示指示点
				autoplay: false,//自动轮播
				latitude: 22.244990,
				longitude: 113.574830,
				keywords:[
					{type:'公交站',list:[],distance:0,time:0},
					{type:'小学',list:[],distance:0,time:0},
					{type:'超市',list:[],distance:0,time:0},
					{type:'餐厅',list:[],distance:0,time:0},
				]
			}
		},
		onLoad:function(event){
			try {
				this.banner = JSON.parse(decodeURIComponent(event.detailDate));
			} catch (error) {
				this.banner = JSON.parse(event.detailDate);
			}
			console.info(this.banner.CreateUser);
			this.getHotList();
		},
		onReachBottom() {
		},
		mounted(){
	    },
		methods: {
			getHotList() {
				let _this = this;
				let data = {id:this.banner.Id};
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetX3EstateDetail',
					data:data,
					success: (res) => {
						if (res.statusCode == 200) {
							_this.detail = JSON.parse(res.data.Extend);
							_this.covers = [{
								latitude: _this.detail.Estate.Latitude,
								longitude: _this.detail.Estate.Longitude,
								iconPath: '../../../../static/location.png'
							}];
							_this.detail.HouseContent=_this.detail.HouseContent?_this.detail.HouseContent:"";
							_this.detail.HouseContent = graceRichText.format(decodeURIComponent(_this.detail.HouseContent));
							console.info(JSON.parse(res.data.Extend),_this.covers);
							// #ifdef MP-WEIXIN
							for(let i=0;i<_this.keywords.length;i++){
								_this.qqmapsdk.search({
									keyword:_this.keywords[i].type,
									location: {
										latitude: _this.detail.Estate.Latitude,
										longitude: _this.detail.Estate.Longitude
									},
									sig: _this.sig,
									success: function(res) {
										_this.keywords[i].list = res.data;
										_this.qqmapsdk.calculateDistance({
											sig: _this.sig,
											from: {
												latitude: _this.detail.Estate.Latitude,
												longitude: _this.detail.Estate.Longitude
											},
											to: [{
												latitude: res.data[0].location.lat,
												longitude: res.data[0].location.lng
											}],
											success: function(res) {
												_this.keywords[i].distance = res.result.elements[0].distance;
												_this.keywords[i].time = Math.ceil(res.result.elements[0].distance/66.66);
												console.info(123456);
											},
											fail: function(error) {
											  console.error(error);
											},
										});
									},
									fail: function(error) {
									  console.error(error);
									},
								});
							}
							// #endif
						}
					},
					fail: (e) => {
						console.info(e);
					}
				})
			},
			swiperChange:function(e){
				this.current = e.detail.current+1;
			},
			animationfinish:function(e){
				console.info(e.detail);
			},
		}
	}
</script>

<style lang="less">
	.cu-list.grid.no-border{
		padding-left: 0;
		padding-right: 0;
		&>.cu-item.map{
			.iconfont{
				width: 60upx;
				text-align: left;
			}
			text{
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 1;
				  -webkit-box-orient: vertical;
				&.text-df{
					font-size: 28upx;
				}
				&.text-sm{
					font-size: 24upx;
				}
				&.text-xxl{
					font-size: 56upx;
				}
				&.text-black{
					color:var(--black);
				}
				&.text-grey{
					color:var(--grey);
				}
			}
		}
	}
	.house-detail-box{
		//background: #ff4a4a;
		color: #9aa0a6;
		padding: 14upx 0;
		border-radius: 10upx;
		border-bottom: 2upx solid #e4e4e4;
		&>.house-detail-box-div{
			width: 50%;
			float: left;
			border-right: 2upx solid #e4e4e4;
			text-align: center;
			box-sizing: border-box;
			&:last-child{
				border-right:0;
			}
			.house-detail-box-div-name,.house-detail-box-div-num{    
				//display: block;
				margin: 0 10upx;
				line-height: 36upx;
			}
			.house-detail-box-div-num{    
				color: #ff4a4a;
				font-size: 36upx;
			}
		}
	}
	.house-detail{
		.w100,.w50{
			float: left;
			width: 100%;
			display: flex;
			margin-bottom: 10upx;
			.lable{
				display: inline-block;
				padding-right: 10upx;
				color: #999999;
				box-sizing: content-box;
			}
			.text{
				flex: 1;
				padding-left: 10upx;
			}
		}
		.w50{
			width: 50%;
			&.right{
				.lable{
					width: 112upx
				}
			}
		}
	}
	.house-lable{
		.house-lable-box{
			display: inline-block;
			background:#f2f2f2;
			color:#999999;
			border-radius: 6upx;
			padding: 10upx 16upx;
			line-height: 1;
			float: left;
			margin: 0 10upx 10upx 0;
			font-size: 24upx;
		}
	}
	.uni-column-item {
		.uni-column-number{
			color: #fff;
			position: absolute;
			right: 40upx;
			bottom: 10upx;
			background: #00000075;
			padding: 0 20upx;
			border-radius: 25upx;
			.iconfont{
				font-size: 40upx;
				margin-right: 10upx;
				vertical-align: middle;
			}
		}
		.uni-column-type{
			position: absolute;
			left: 0;
			bottom: 5upx;
			width: 100%;
			text-align: center;
			.type-g{
				display: inline-block;
				.uni-column-type-item{
					display: inline-block;
					background: #666666;
					padding: 0 20upx;
					border-radius: 25upx;
					color: #ffffff;
					margin: 5upx;
					font-size: 24upx;
					line-height: 2;
					&.on{
						background:#ff4a4a;
					}
					.cuIcon-playfill{
						margin-left: -10upx;
					}
				}
			}
		}
	}
	.YZBtn{
		background: #FBFBFB;
		margin: 20upx 40upx;
		padding: 20upx;
		border-radius: 10upx;
		box-shadow: 0px 0px 5px #dddddd;
		&.ZXBtn{
			padding: 10upx;
			background: #f4f4f5;
			text-align: center;
			color: #366699;
		}
	}
	.cu-avatar-box{
		.cu-avatar-name{
			font-size: 32upx;
			color: #333333;
			line-height: 48upx;
		}
		.cu-avatar-num{
			font-size: 28upx;
			color: #999999;
			line-height: 48upx;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		.cu-avatar-main{
			line-height: 1.5;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	}
	.YZListBox{
		background: #FFFFFF;
		.article-author{
			padding: 10px 15px;
			margin: 0;
			font-size: 32upx;
			border-bottom: 2upx solid #dadada;
		}
		.YZListBoxIcon{
			line-height: 1;
			padding-right: 20upx;
			.YZListBoxIconImg{
				width: 90upx;
				height:90upx;
				border-radius: 50%;
			}
		}
		.uni-triplex-left{
			flex: 1;
			margin-right: 30upx;
			.phone{
				color:#666666;
				font-size: 24upx;
				margin-left: 10upx;
			}
		}
		.uni-list-cell-navigate.uni-navigate-right:after{
			color:#666666;
			font-size: 40upx;
		}
		.labelBox{
			line-height:1.5;
			border-radius: 10upx;
			margin-right: 10upx;
		}
		&.GJ{
			.uni-list-cell{
				display: block;
				position: relative;
				.uni-list-cell-navigate{
					align-items: flex-start;
					.YZListBoxIcon{
						.YZListBoxIconImg{
							border-radius:20upx;
						}
					}
					.uni-triplex-left{
						margin: 0;
						.uni-title{
							padding-top: 0;
						}
						.phone{
							color:#999999;
							font-size: 24upx;
							margin-left: 0;
							margin-right: 20upx;
						}
						.uni-main{
							color: #666;
							padding: 0;
							font-size: 28upx;
						}
					}
					.labelBox{
						position: absolute;
						right: 30upx;
						top: 22upx;
						display: inline-block;
					}
				}
			}
		}
		&.DK{
			.uni-list-cell{
				display: block;
				padding-bottom: 20upx;
				.YZListBoxIcon{
					.YZListBoxIconImg{
						border-radius:20upx;
					}
				}
				.uni-triplex-left{
					.phone{
						color:#999999;
						font-size: 24upx;
						margin-left: 0;
						margin-right: 20upx;
					}
				}
				.DKMsg{
					padding: 0 30upx;
					.DKMsgBox{
						font-size: 24upx;
						background: #f2f2f2;
						color: #666;
						padding: 10upx;
						margin-bottom: 10upx;
					}
					.DKAdr{
						font-size: 24upx;
						color: #999999;
						&::before{
							content: "\e636";
							font-family: iconfont;
							display: inline-block;
							margin-right: 10upx;
							font-size: 28upx;
						}
					}
					.DKTool{
						text-align: right;
						.DKToolitem{
							display: inline-block;
							margin-right: 20upx;
							color: #333333;
							.iconfont{
								margin-right: 10upx;
							}
							&.on{
								color: #ff4a4a;
							}
						}
					}
					.post-footer{
						margin-top: 20upx;
						background-color: #f3f3f5;
						width: 100%;
					}
					.footer_content {
						padding:6upx 20upx;
						position: relative;
						display: -webkit-box;
						display: -webkit-flex;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-webkit-align-items: center;
						-ms-flex-align: center;
						align-items: center;
						-webkit-flex-wrap: wrap;
						-ms-flex-wrap: wrap;
						flex-wrap: wrap;
						border-bottom:2upx solid #ededed;
					}
					
					.footer_content .nickname {
						color: #36648B;
						font-size: 24upx;
						margin-left:10upx;
					}
					
					.footer_content .comment-nickname {
						color: #36648B;
						font-size: 24upx
					}
					
					.footer_content .comment-content {
						color: #000000;
						font-size: 24upx
					}
				}
			}
		}
	}
	.KeyListBox{
		padding:0;
		background: #FFFFFF;
		.article-author{
			padding: 10px 15px;
			margin: 0;
			font-size: 32upx;
			border-bottom: 2upx solid #dadada;
		}
		.key-list{
			background: #FFFFFF;
			.uni-triplex-left{
				flex: 1;
				.uni-title{
					font-size:28upx;
					label{
						margin-right: 10upx;
						color: #666666;
					}
				}
			}
			.uni-triplex-right{
				width: 160upx;
				text-align: center;
				.key-label{
					line-height: 1.5;
					font-size: 28upx;
					border-radius: 10upx;
				}
			}
		}
	}
	.foot {
		position: fixed;
		width: 100%;
		height: 90upx;
		min-height: 90upx;
		left: 0upx;
		bottom: 0upx;
		overflow: hidden;
		z-index: 999;
		box-shadow: 0px 0px 5px #999;
	}
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 30upx 30upx;
		color: #333333;
		display: block;
		background: #FFFFFF;
	}
	.mb10{
		margin-bottom: 20upx;
	}
	.rich{
		font-size: 28upx;
		padding-bottom: 20upx;
		color: #999999;
	}

	.article-text {
		font-size: 26upx;
		line-height: 50upx;
		margin: 0 20upx;
	}

	.article-author{
		font-size: 48upx;
		display: block;
		line-height: 1.5;
		color: #333333;
		&.f18{
			font-size: 32upx;
			font-weight: 500;
		}
	}
	.article-author.f16{
		font-size: 32upx;
		line-height: 2;
		font-weight: 600;
	}
	.article-author.f14{
		font-size: 28upx;
		font-weight: normal;
	}
	.article-author.f14 span{
		color: #248ae5;
	}
	.article-time{
		display: block;
		font-size: 28upx;
		line-height: 2;
	}

	.article-content {
		padding: 20upx 30upx;
		overflow: hidden;
		font-size: 30upx;
		background: #FFFFFF;
		position: relative;
	}
	.article-content.pl0.pr0 {
		padding-left: 0;
		padding-right: 0;
	}
	.article-content .go-view{
		position: relative;
	}
	.article-content .go-view:after{
		font-family: uniicons;
		content: '\E583';
		position: absolute;
		right: 12px;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.uni-column-item {
		flex: 1;
		justify-content: left;
		height: 100%;
		position: relative;
	}
	.uni-list{
		background: #f9fafc;
		border-left: 1px solid #c8c7cc;
		border-right: 1px solid #c8c7cc;
		border-radius: 5px;
	}
	.uni-list .uni-list-cell .uni-list-cell-navigate{
		padding-right: 120upx;
		position: relative;
	}
	
	.uni-list .uni-list-cell .uni-list-cell-navigate::after{
		display: block;
		content: "\e915";
		font-family: iconfont;
		position: absolute;
		font-size: 50upx;
		line-height: 94upx;
		right: 36upx;
	}
	.uni-list2 .uni-triplex-left{
		width: 70%;
	}
	.uni-list2 .uni-triplex-right{
		width: 20%;
		text-align: left;
	}
	.map-btn{
		flex: 1;
		margin: 10upx;
	}
	.uni-list3 .uni-list-cell-navigate{
		padding:11px 0;
	}
	.uni-list3 .uni-comment-face{
		height: 140upx;
		width:140upx;
	}
	.uni-list3 .uni-title{
		line-height: 100upx;
	}
	.uni-list3 .people-msg{
		width: 60%;
	}
	.uni-list3 .people-btn{
		width: 40%;
	}
	.uni-list3 .people-btn .iconfont{
		font-size: 40upx;
		width: 72upx;
		border: 2upx solid #e7736d;
		text-align: center;
		border-radius: 50%;
		color:#e7736d;
		margin: 0 auto;
	}
	.uni-list3 .people-btn .btn-txt{
		width: 72upx;
		text-align: center;
		color: #999999;
		margin: 0 auto;
	}
	.uni-list3+.uni-column-item-text .map-btn{
		font-size: 24upx;
		padding: 10upx;
		justify-content: center;
		align-items: center;
		line-height: 60upx;
		height: 80upx;
	}
	.uni-list3+.uni-column-item-text .map-btn.row2{
		line-height: 30upx;
	}
	.calltool{
		display:flex;
		background: #FFFFFF;
		height: 100upx;
		.toolbtn{
			flex: 1;
			text-align: center;
			height: 100upx;
			padding: 10upx 0;
			color: #FFFFFF;
			line-height: 80upx;
			view{
				display: inline-block;
				&.iconfont{
					font-size: 40upx;
					color: #FFFFFF;
					line-height: 80upx;
					margin-right: 10upx;
					vertical-align: middle;
				}
			}
		}
	}
	.adrbox{
		position: absolute;
		top: 50%;
		padding: 20upx 20upx 20upx 20upx;
		left: 5%;
		width: 90%;
		box-sizing: border-box;
		background: #ffffff;
		word-break: break-all;word-wrap:break-word;white-space:pre-line;
		line-height: 1.5;
		text-align: justify;
	}
	.model-main>.uni-row.model-item{
		padding: 30upx;
		overflow: hidden;
		position: relative;
		&:after{
			content: "";
			display: block;
			height: 2upx;
			width: 100%;
			background: #CCCCCC;
			left: 30upx;
			bottom: 0;
			position: absolute;
		}
		&:last-child:after{
			display: none;
		}
		.cu-avatar-box{
			.cu-avatar-name{
				font-size: 32upx;
				color: #333333;
				line-height: 48upx;
			}
			.cu-avatar-num{
				font-size: 28upx;
				color: #999999;
				line-height: 48upx;
			}
			.cu-avatar-main{
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}
	}
	.model .model-header{
		line-height: 70upx;
		font-size: 32upx;
		padding: 30upx 30upx 0;
		line-height: 1;
	}
	.model-item{
		.model-item-img{
			width: 260upx;height: 260upx;border-radius: 10upx;
		}
		.model-item-text{
			padding-left: 20upx;
			position: relative;
			.model-item-title,
			.model-item-title2{
				font-size: 30upx;
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				color: #333333;
			}
			.model-item-title{
				font-weight: 600;
			    -webkit-line-clamp: 2;
				height: 96upx;
				.label-box{
					height: 32upx;
					margin-right: 10upx;
					display: inline-block;
					vertical-align: text-top;
					&.kind1{
						width:84upx;
					}
					&.kind2{
						width:34upx;
					}
					&.kind3{
						width:58upx;
					}
				}
			}
			.model-item-title2{
				font-size: 26upx;
				color: #666666;
				line-height: 42upx;
				&.adr{
					font-size: 24upx;
				}
				&.main{
					.model-item-main-price{
						font-size: 30upx;
						color: #E03236;
						text{
							font-size: 24upx;
							margin:0 10upx 0 6upx;
						}
					}
				}
			}
			.model-item-main{
				position: absolute;
				bottom: 0;
			}
		}
	}
</style>
